
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { Brain, Target, Trophy } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface QuizProgressProps {
  completedQuizzes: number;
  totalQuizzes: number;
  strengths: string[];
  nextQuiz: string;
}

export function QuizProgress({ completedQuizzes, totalQuizzes, strengths, nextQuiz }: QuizProgressProps) {
  const progress = (completedQuizzes / totalQuizzes) * 100;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Brain className="w-5 h-5 text-primary" />
          Your Learning Progress
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>{completedQuizzes} of {totalQuizzes} quizzes completed</span>
            <span>{Math.round(progress)}%</span>
          </div>
          <Progress value={progress} className="h-2" />
        </div>
        
        <div className="space-y-2">
          <h4 className="text-sm font-medium flex items-center gap-2">
            <Trophy className="w-4 h-4 text-primary" />
            Your Identified Strengths
          </h4>
          <div className="flex flex-wrap gap-2">
            {strengths.map(strength => (
              <Badge key={strength} variant="secondary" className="bg-accent/50">
                {strength}
              </Badge>
            ))}
          </div>
        </div>

        <div className="space-y-2">
          <h4 className="text-sm font-medium flex items-center gap-2">
            <Target className="w-4 h-4 text-primary" />
            Next Recommended Quiz
          </h4>
          <p className="text-sm text-muted-foreground">{nextQuiz}</p>
        </div>
      </CardContent>
    </Card>
  );
}
